<link rel="stylesheet" href="/static/cloud/css/cloud.css" />
<style type="text/css">
	.content{margin:20px;}
	.content ul{padding-top: 10px;padding-bottom: 10px}
	.content .layui-nav .url{padding-right: 0.5rem;padding-left: 0.5rem;cursor: pointer;text-align: center;line-height: 40px}
	.content .bar{margin-bottom: 0.5rem}
	.content .layui-nav{background: white;color: #6d6d6d;padding: 0}
	.content .table_file_name{color: #00986f;}
	.content .table_file_name:hover{cursor: pointer;color: #5fb878;}
	.content .forbid{color: #cacaca}
</style>
<div class="content">
	<script type="text/html" id="table-file-name-tpl">
		{{# if(d.delete_time){ }}
	  	<div class="forbid">[已删除] {{d.file_name}}</div>
		{{# }else if(!d.file_id){ }}
		<div class="forbid">[文件已删除]</div>
	  	{{# }else{ }}
	  	<div class="table_file_name" lay-event="title" title="{{d.file_name}}" >{{d.file_name}}</div>
	  	{{# } }}
	</script>
	<script type="text/html" id="table-bar-tpl">
		{{# if(d.delete_time){ }}
		<a class="layui-btn layui-btn-xs layui-btn-disabled" lay-event="">打开所在目录</a>
		{{# }else if(!d.file_id){ }}
		<a class="layui-btn layui-btn-xs layui-btn-disabled" lay-event="">打开所在目录</a>
		{{# }else{ }}
		<a class="layui-btn layui-btn-xs layui-btn-primary layui-border-blue" lay-event="open">打开所在目录</a>
		{{# } }}
	  	
	  	<a class="layui-btn layui-btn-xs layui-btn-primary layui-border-red" lay-event="del" data-id={{d.id}}>取消收藏</a>
	</script>
	<script type="text/html" id="table-bar-image">
		{{# if(d.type==2){ }}
			<img style="width: 1.5rem" src="/static/layui_extends/fileManager/img/dir.png">
	  	{{# }else if(d.type==1){  }}
	  		<img style="width: 1.5rem" src="/static/layui_extends/fileManager/img/{{app.getExtendName(d.file_name)}}.png" onerror="this.src='/static/layui_extends/fileManager/img/none.png'">
	  	{{# }else{ }}
	  		<img style="width: 1.5rem" src="/static/layui_extends/fileManager/img/none.png">
	  	{{# } }}
	</script>
	<script type="text/html" id="table-bar-tpl-residue-time">
			{{overtime_calc(d.create_time)}}
	</script>
	
	<!-- 回收站列表工具模板 -->
	<script type="text/html" id="table-bar-tpl-recycle">
	  	<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="recycle_recover" data-id={{d.id}}>恢复</a>
		<a class="layui-btn layui-btn-xs layui-btn-primary layui-border-red " lay-event="recycle_del" data-id={{d.id}}>永久删除</a>
	</script>
	<div class="layui-row layui-col-space20">
		<!-- <div class="layui-col-md2"> -->
			<div class="cloud-card bar">
				<ul class="layui-nav">
					<li class="layui-nav-item" data-id='1'><div class="url" data-href='/index/file?type=1'>收藏文件</div></li>
					<!-- <li class="layui-nav-item" data-id='2'><div class="url" data-href='/index/file?type=2'>最近上传</div></li> -->
					<!-- <li class="layui-nav-item" data-id='3'><div class="url" data-href='/index/file?type=3'>最近使用</div></li> -->
					<li class="layui-nav-item" data-id='4'><div class="url" data-href='/index/file?type=4'>回收站</div></li>
				</ul>
			</div>
		<!-- </div> -->
		<!-- <div class="layui-col-md10"> -->
			<div class="cloud-card table">
				<!-- <button class="layui-btn layui-btn-danger layui-btn-sm" id="clean_log_btn">清空记录</button> -->
				<table class="layui-hide" id="data-table" lay-filter="data-table"></table>
			</div>
		<!-- </div> -->
	</div>
</div>
<script type="text/javascript">
	layui.use(['table'],function(){
		var table=layui.table,$=layui.$;

		var type=app.parseUrl().params.type||1;
		var url=['/api/collect/getList','/api/index/getUploadList','','/api/recycle/getList']
		console.log(type);
		app.setTopMenu('/index/file');
		$('.content .layui-nav .url').click(function(){
			app.go($(this).attr('data-href'));
		})
		
		// 设置页面标题
		var title="";
		if(!type){
			title=$('.content .layui-nav-item[data-id=' + 1 + '] div').text();
		}else{
			title=$('.content .layui-nav-item[data-id=' + type + '] div').text();
		}
		$("title").text(title+ ' - 文件 - 私有云盘');

		$('.content .layui-nav-item[data-id='+type+'] div').addClass('layui-this')
		var cols=[];
		if(!app.isMobile()){
			cols.push({ field: '', title: '图标', toolbar: '#table-bar-image', width: 80, align: 'center' });
			if(type==1){
				cols.push({ field: 'file_name', title: '文件名', toolbar: "#table-file-name-tpl" });
				cols.push({ field: 'create_time', title: '收藏时间' });
				cols.push({title: '操作',toolbar: '#table-bar-tpl',align:'center'});
			} else if (type == 2) {
				cols.push({ field: 'file_name', title: '文件名', toolbar: "#table-file-name-tpl" });
				cols.push({ field: 'create_time', title: '上传时间' });
			} else if (type == 3) {
				cols.push({ field: 'file_name', title: '文件名', toolbar: "#table-file-name-tpl" });
				cols.push({ field: 'time', title: '时间' });
			}else if(type == 4){
				cols.push({ field: 'file_name', title: '文件名' });
				cols.push({ field: 'path', title: '所在目录' });
				cols.push({ field: 'create_time', title: '删除时间' });
				cols.push({ field: 'residue_time', title: '有效时间' , toolbar: '#table-bar-tpl-residue-time'});
				cols.push({ title: '操作', toolbar: '#table-bar-tpl-recycle', align: 'center' });
			}
			
		}
		
		table.render({
		    elem: '#data-table'
			,url:url[type-1]
			,method:"POST"
			,headers: { 'Token': app.getToken() }//刚进页面不加载列表
		    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
		    ,skin:'line'
		    ,cols: [cols]
		});

		table.on('tool(data-table)', function(obj){ 
		  	var data = obj.data; //获得当前行数据
		  	var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
		  	var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
		 	
		  	if(layEvent === 'title'){ //点击标题
		  		if(data.type==0){
		  			app.go('/index/file_list?path='+data.path+data.file_id+'/')
		  		}else{
		  			app.runTpl('file_info',{file_id:data.file_id})
		  		}
		  	  	
		  	} else if(layEvent === 'del'){ //删除
		  	  	app.ajaxPost('/api/collect/deleteById',{id:data.id},function(){
		  	  		obj.del(); 
					layer.msg('取消成功')
				});
			} else if(layEvent === 'open'){ //打开目录
				console.log(data)
				app.go('/index/file_list?path='+data.path)
			} else if (layEvent === 'recycle_recover') { //恢复文件
				console.log(data)
				app.ajaxPost('/api/recycle/restoreById', {id: data.id }, function () {
					obj.del();
					layer.msg('恢复成功')
				});
				
			} else if (layEvent === 'recycle_del') { //删除文件（彻底删除）
				console.log(data)
				// 加弹窗
				layer.confirm('你确定永久性删除['+data.file_name+']且此操作不可逆？', {
					btn: ['确定', '取消'], //按钮
					title:'警告'
				}, function () {
					app.ajaxPost('/api/recycle/deleteById', { id: data.id }, function () {
						obj.del();
						layer.msg('删除成功')
					});
				});
				
		  	}
			  
		});

		$('#clean_log_btn').click(function(){
			if(type==1){
				layer.confirm('确定清空所有收藏？', {
				  	btn: ['确定','取消'] //按钮
				}, function(){
				  	app.ajaxPost('/api/file/delCollect',{file_id:0,all:1},function(){
						layer.msg('取消成功')
						location.reload()
					});
				})
				
			}else if(type==2){

				layer.confirm('确定清空所有上传记录？', {
				  	btn: ['确定','取消'] //按钮
				}, function(){
				  	app.ajaxPost('/api/index/cleanUploadList',{},function(){
						layer.msg('已清除')
						location.reload()
					});
				})
			}else if(type==3){
				app.runTpl('file_tool',{file_id:4,elem:'.table'})
			}
			
		})
	})

	// 时间计算
	function overtime_calc(deletetime){
		var text=""
		var valid_day= 30 // 有效天数
		var valid_second= valid_day * 24 * 60 * 60 * 1000;
		var sec= valid_second -(new Date().getTime() - new Date(deletetime).getTime()); 
		// console.log(deletetime, sec)
		var day= Math.floor(sec / (24 * 3600 * 1000))
		// console.log(deletetime, day)
		if(day==0){
			const time=Math.floor(sec / (3600 * 1000))  
			if(time<=0){
				const minutes = Math.floor(sec / (60 * 1000))
				text = minutes + "分钟"
			}else{
				text = time + "小时"
			}
			
		}else{
			text=day+ "天"
		}
		console.log(text)
		return text
	}
	// console.log(overtime_calc("2021-07-05 12:00:00"))
</script>